<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>17webgl使用多幅纹理</title>
    <script src="lib/webgl-debug.js"></script>
    <script src="lib/webgl-utils.js"></script>
    <script src="lib/cuon-utils.js"></script>
    <script src="lib/cuon-matrix.js"></script>
</head>

<body onload="main()">
    <canvas width="800" height="800" id="canvas"></canvas>
</body>

<script>
    var vs = `
    attribute vec4 position;
    attribute vec2 texcoord;
    varying vec2 coord ;
    void main(){
        gl_Position = position;
        coord = texcoord;
    }
    `
    var fs = `
    precision mediump float;
    uniform sampler2D sampler;
    uniform sampler2D sampler1;
    varying vec2 coord ;
    uniform float width;
    uniform float height ;
    void main(){
        vec2 pos =vec2(gl_FragCoord.x/width,gl_FragCoord.y/height);
        vec4 col1 = texture2D(sampler,pos);
        vec4 col2 = texture2D(sampler1,pos);
        float r =col1.r*col2.r;
        float g =col1.g*col2.g;
        float b =col1.b*col2.b;
        float a =col1.a*col2.a;
        // vec4 col = ((col1 + col1*-1)*(col2+col2*-1))/colb;
        // gl_FragColor = vec4(r,g,b,1);
        gl_FragColor = col1;
    }
    `
    var canvas;
    var gl;

    function main() {
        canvas = document.getElementById("canvas");
        gl = getWebGLContext(canvas);

        draw();
    }
    //绘制
    function draw() {
        if (!initShaders(gl, vs, fs)) {
            console.log("初始化着色器失败");
            return;
        }
        var n = initVertexBuffers();

        var width = gl.getUniformLocation(gl.program, "width");
        var height = gl.getUniformLocation(gl.program, "height");
        gl.uniform1f(width, gl.drawingBufferWidth);
        gl.uniform1f(height, gl.drawingBufferHeight);

        initTexture(n);
    }

    function initVertexBuffers() {
        var vertexDatas = new Float32Array([-1, 1, 0, 1, //左上角
            1, 1, 1, 1, //右上角
            -1, -1, 0, 0, //左下角
            1, -1, 1, 0 //右下角
        ]);
        //创建顶点缓冲区
        var vertexBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, vertexDatas, gl.STATIC_DRAW);
        var size = vertexDatas.BYTES_PER_ELEMENT;
        var position = gl.getAttribLocation(gl.program, "position");
        gl.vertexAttribPointer(position, 2, gl.FLOAT, false, size * 4, 0);
        gl.enableVertexAttribArray(position);
        var texcoord = gl.getAttribLocation(gl.program, "texcoord");
        gl.vertexAttribPointer(texcoord, 2, gl.FLOAT, false, size * 4, size * 2);
        gl.enableVertexAttribArray(texcoord);
        return 4;
    }

    var image1loaded, image2loaded;

    function initTexture(n) {
        var texture = gl.createTexture();
        var texture1 = gl.createTexture();
        var sampler = gl.getUniformLocation(gl.program, "sampler");
        var sampler1 = gl.getUniformLocation(gl.program, "sampler1");
        var image = new Image();
        image.onload = function() {
            image1loaded = true;
            loadTexture(gl, n, sampler, texture, image, gl.TEXTURE0, 0);
        }

        var image1 = new Image();
        image1.onload = function() {
            image2loaded = true;
            loadTexture(gl, n, sampler1, texture1, image1, gl.TEXTURE1, 1);
        }

        image.src = "./image/1.png";
        image1.src = './image/4.png';
    }

    function loadTexture(gl, n, sampler, texture, image, texId, texUnit) {
        // 将纹理图进行y轴反转
        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
        // 开启指定纹理单元
        gl.activeTexture(texId);
        // 绑定纹理
        gl.bindTexture(gl.TEXTURE_2D, texture);
        //配置纹理参数
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
        //配置纹理图像
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);
        gl.uniform1i(sampler, texUnit);
        if (image1loaded && image2loaded) {
            gl.clearColor(0, 0, 0, 1);
            gl.clear(gl.COLOR_BUFFER_BIT);
            gl.drawArrays(gl.TRIANGLE_STRIP, 0, n);
        }
    }
</script>

</html>